<template>
  <div class="home">
    <div style="background-color: rgba(178,187,190,0.3) ">
      <!--导航栏-->
      <a-page-header
          class="demo-page-header"
          style="border: 1px solid rgb(235, 237, 240); background: rgba(255, 255, 255, 0.5);padding-left: 65px;"
          title="Memory Cal 忆算云"
          sub-title="公式化计算问题的一站式解决者"
      >
      </a-page-header>

      <!--LOGO-->
      <div style="position: absolute;top: 3.5%;left: 2%;">
        <Icon :style="{ color: 'hotpink'}">
          <template #component>
            <svg t="1705158531565" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="1731" width="32" height="32">
              <path d="M619.3 840.7c-5 0-9-4-9-9V197.5c0-5 4-9 9-9H934c5 0 9 4 9 9v634.2c0 5-4 9-9 9H619.3z"
                    fill="#F7D7FF" p-id="1732"></path>
              <path
                  d="M934 197.5v634.2H619.3V197.5H934m0-18H619.3c-9.9 0-18 8.1-18 18v634.2c0 9.9 8.1 18 18 18H934c9.9 0 18-8.1 18-18V197.5c0-10-8.1-18-18-18z"
                  fill="#330867" p-id="1733"></path>
              <path d="M635.9 216h281.4v597.1H635.9z" fill="#FFFFFF" p-id="1734"></path>
              <path d="M914.3 219v591.1H638.9V219h275.4m6-6H632.9v603.1h287.4V213z" fill="#330867" p-id="1735"></path>
              <path
                  d="M776.6 763.2c-21.2 0-38.5-17.3-38.5-38.5s17.3-38.5 38.5-38.5 38.5 17.3 38.5 38.5-17.3 38.5-38.5 38.5z"
                  fill="#FC6B79" p-id="1736"></path>
              <path
                  d="M776.6 695.2c16.3 0 29.5 13.2 29.5 29.5s-13.2 29.5-29.5 29.5-29.5-13.2-29.5-29.5 13.2-29.5 29.5-29.5m0-18c-26.2 0-47.5 21.3-47.5 47.5s21.3 47.5 47.5 47.5 47.5-21.3 47.5-47.5-21.3-47.5-47.5-47.5z"
                  fill="#330867" p-id="1737"></path>
              <path
                  d="M701.8 390.7c-9.3 0-16.9-7.6-16.9-16.9s7.6-16.9 16.9-16.9c9.3 0 16.9 7.6 16.9 16.9s-7.6 16.9-16.9 16.9z"
                  fill="#FFE08A" p-id="1738"></path>
              <path
                  d="M701.8 360c7.7 0 13.9 6.2 13.9 13.9s-6.2 13.9-13.9 13.9-13.9-6.2-13.9-13.9 6.2-13.9 13.9-13.9m0-6c-11 0-19.9 8.9-19.9 19.9s8.9 19.9 19.9 19.9c11 0 19.9-8.9 19.9-19.9s-8.9-19.9-19.9-19.9z"
                  fill="#330867" p-id="1739"></path>
              <path
                  d="M776.6 390.7c-9.3 0-16.9-7.6-16.9-16.9s7.6-16.9 16.9-16.9c9.3 0 16.9 7.6 16.9 16.9s-7.6 16.9-16.9 16.9z"
                  fill="#FFE08A" p-id="1740"></path>
              <path
                  d="M776.6 360c7.7 0 13.9 6.2 13.9 13.9s-6.2 13.9-13.9 13.9-13.9-6.2-13.9-13.9S769 360 776.6 360m0-6c-11 0-19.9 8.9-19.9 19.9s8.9 19.9 19.9 19.9c11 0 19.9-8.9 19.9-19.9s-8.9-19.9-19.9-19.9z"
                  fill="#330867" p-id="1741"></path>
              <path
                  d="M851.4 390.7c-9.3 0-16.9-7.6-16.9-16.9s7.6-16.9 16.9-16.9c9.3 0 16.9 7.6 16.9 16.9s-7.6 16.9-16.9 16.9z"
                  fill="#FFE08A" p-id="1742"></path>
              <path
                  d="M851.4 360c7.7 0 13.9 6.2 13.9 13.9s-6.2 13.9-13.9 13.9-13.9-6.2-13.9-13.9 6.3-13.9 13.9-13.9m0-6c-11 0-19.9 8.9-19.9 19.9s8.9 19.9 19.9 19.9 19.9-8.9 19.9-19.9-8.9-19.9-19.9-19.9z"
                  fill="#330867" p-id="1743"></path>
              <path
                  d="M680.5 314.7c-11.6 0-21-9.4-21-21v-3.5c0-11.6 9.4-21 21-21h192.1c11.6 0 21 9.4 21 21v3.5c0 11.6-9.4 21-21 21H680.5z"
                  fill="#FFE08A" p-id="1744"></path>
              <path
                  d="M872.7 278.1c6.6 0 12 5.4 12 12v3.5c0 6.6-5.4 12-12 12H680.5c-6.6 0-12-5.4-12-12v-3.5c0-6.6 5.4-12 12-12h192.2m0-18H680.5c-16.5 0-30 13.5-30 30v3.5c0 16.5 13.5 30 30 30h192.1c16.5 0 30-13.5 30-30v-3.5c0.1-16.5-13.4-30-29.9-30z"
                  fill="#330867" p-id="1745"></path>
              <path d="M874.7 582.7H678.5c-5 0-9-4-9-9s4-9 9-9h196.2c5 0 9 4 9 9s-4 9-9 9z" fill="#330867"
                    p-id="1746"></path>
              <path d="M874.7 483.6H678.5c-5 0-9-4-9-9s4-9 9-9h196.2c5 0 9 4 9 9s-4 9-9 9z" fill="#330867"
                    p-id="1747"></path>
              <path d="M86.6 708.7c-5 0-9-4-9-9V227c0-5 4-9 9-9h620.2c5 0 9 4 9 9v472.7c0 5-4 9-9 9H86.6z"
                    fill="#66C1FF" p-id="1748"></path>
              <path
                  d="M706.8 227v472.7H86.6V227h620.2m0-18H86.6c-9.9 0-18 8.1-18 18v472.7c0 9.9 8.1 18 18 18h620.2c9.9 0 18-8.1 18-18V227c0-9.9-8-18-18-18z"
                  fill="#330867" p-id="1749"></path>
              <path
                  d="M226.2 540.1c-0.7 0-1.3-0.2-1.9-0.7L183 505.9c-0.7-0.6-1.1-1.4-1.1-2.3s0.4-1.8 1.1-2.3l41.3-33.5c1.3-1 3.2-0.8 4.2 0.4 1 1.3 0.8 3.2-0.4 4.2l-38.4 31.1 38.4 31.1c1.3 1 1.5 2.9 0.4 4.2-0.6 0.9-1.5 1.3-2.3 1.3zM239.2 535.7c-0.2 0-0.5 0-0.7-0.1-1.6-0.4-2.6-2-2.2-3.6l14.6-58.2c0.4-1.6 2-2.6 3.6-2.2 1.6 0.4 2.6 2 2.2 3.6l-14.6 58.2c-0.4 1.4-1.6 2.3-2.9 2.3zM355.3 540.1c-0.9 0-1.7-0.4-2.3-1.1-1-1.3-0.8-3.2 0.4-4.2l38.4-31.1-38.4-31.1c-1.3-1-1.5-2.9-0.4-4.2 1-1.3 2.9-1.5 4.2-0.4l41.3 33.5c0.7 0.6 1.1 1.4 1.1 2.3s-0.4 1.8-1.1 2.3l-41.3 33.5c-0.5 0.2-1.2 0.5-1.9 0.5z"
                  fill="#FFFFFF" p-id="1750"></path>
              <path d="M270.9 503.6a6.5 6.7 0 1 0 13 0 6.5 6.7 0 1 0-13 0Z" fill="#FFFFFF" p-id="1751"></path>
              <path d="M305.4 503.6a6.5 6.7 0 1 0 13 0 6.5 6.7 0 1 0-13 0Z" fill="#FFFFFF" p-id="1752"></path>
              <path d="M340 503.6a6.5 6.7 0 1 0 13 0 6.5 6.7 0 1 0-13 0Z" fill="#FFFFFF" p-id="1753"></path>
              <path
                  d="M226.2 336.8c-0.7 0-1.3-0.2-1.9-0.7L183 302.6c-0.7-0.6-1.1-1.4-1.1-2.3s0.4-1.8 1.1-2.3l41.3-33.5c1.3-1 3.2-0.8 4.2 0.4 1 1.3 0.8 3.2-0.4 4.2l-38.4 31.1 38.4 31.1c1.3 1 1.5 2.9 0.4 4.2-0.6 0.9-1.5 1.3-2.3 1.3zM314 336.8c-0.9 0-1.7-0.4-2.3-1.1-1-1.3-0.8-3.2 0.4-4.2l38.4-31.1-38.4-31.1c-1.3-1-1.5-2.9-0.4-4.2 1-1.3 2.9-1.5 4.2-0.4l41.3 33.5c0.7 0.6 1.1 1.4 1.1 2.3s-0.4 1.8-1.1 2.3l-41.3 33.5c-0.5 0.3-1.2 0.5-1.9 0.5z"
                  fill="#FFFFFF" p-id="1754"></path>
              <path d="M229.6 300.3a6.5 6.7 0 1 0 13 0 6.5 6.7 0 1 0-13 0Z" fill="#FFFFFF" p-id="1755"></path>
              <path d="M264.1 300.3a6.5 6.7 0 1 0 13 0 6.5 6.7 0 1 0-13 0Z" fill="#FFFFFF" p-id="1756"></path>
              <path d="M298.7 300.3a6.5 6.7 0 1 0 13 0 6.5 6.7 0 1 0-13 0Z" fill="#FFFFFF" p-id="1757"></path>
              <path d="M346.4 799.3c-5 0-9-4-9-9v-76.7c0-5 4-9 9-9H447c5 0 9 4 9 9v76.7c0 5-4 9-9 9H346.4z"
                    fill="#F0BEFC" p-id="1758"></path>
              <path
                  d="M447 713.6v76.7H346.4v-76.7H447m0-18H346.4c-9.9 0-18 8.1-18 18v76.7c0 9.9 8.1 18 18 18H447c9.9 0 18-8.1 18-18v-76.7c0-9.9-8-18-18-18z"
                  fill="#330867" p-id="1759"></path>
              <path d="M86.6 708.7c-5 0-9-4-9-9v-72.1c0-5 4-9 9-9h620.2c5 0 9 4 9 9v72.1c0 5-4 9-9 9H86.6z"
                    fill="#FFFFFF" p-id="1760"></path>
              <path
                  d="M706.8 627.6v72.1H86.6v-72.1h620.2m0-18H86.6c-9.9 0-18 8.1-18 18v72.1c0 9.9 8.1 18 18 18h620.2c9.9 0 18-8.1 18-18v-72.1c0-9.9-8-18-18-18z"
                  fill="#330867" p-id="1761"></path>
              <path d="M706.8 699.7H86.6v-39.5c170.9 27.1 377.7 34 620.2 20.9v18.6z" fill="#F7D7FF" p-id="1762"></path>
              <path d="M190.2 840.6c-5 0-9-4-9-9v-41.3c0-5 4-9 9-9h413.1c5 0 9 4 9 9v41.3c0 5-4 9-9 9H190.2z"
                    fill="#F0BEFC" p-id="1763"></path>
              <path
                  d="M603.3 790.3v41.3H190.2v-41.3h413.1m0-18H190.2c-9.9 0-18 8.1-18 18v41.3c0 9.9 8.1 18 18 18h413.1c9.9 0 18-8.1 18-18v-41.3c0-10-8.1-18-18-18z"
                  fill="#330867" p-id="1764"></path>
              <path d="M361.9 376.9H239.2c-1.7 0-3-1.3-3-3s1.3-3 3-3h122.7c1.7 0 3 1.3 3 3s-1.4 3-3 3z" fill="#FFFFFF"
                    p-id="1765"></path>
              <path d="M632 409.5H239.2c-1.7 0-3-1.3-3-3s1.3-3 3-3H632c1.7 0 3 1.3 3 3s-1.3 3-3 3z" fill="#FFFFFF"
                    p-id="1766"></path>
              <path d="M469.9 442.1H239.2c-1.7 0-3-1.3-3-3s1.3-3 3-3h230.7c1.7 0 3 1.3 3 3s-1.3 3-3 3z" fill="#FFFFFF"
                    p-id="1767"></path>
            </svg>
          </template>
        </Icon>
      </div>

      <!--我的个人博客-->
      <div style="position: absolute;top: 3.5%;right: 14%">
        <a href="https://deng-2022.gitee.io/blog/" target="_blank">
          <a-button type="link">
            <Icon :style="{ color: 'hotpink'}">
              <template #component>
                <svg t="1705159282177" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="6345" width="24" height="24">
                  <path
                      d="M823.698043 230.909107l-572.248834-2.886804-66.268603-19.491517 0.732091 720.102401 52.752096 42.122394h591.423859"
                      fill="#5FCEFF" p-id="6346"></path>
                  <path
                      d="M737.378465 55.079442v175.829665h-463.550935c-48.528988 0-87.914833-39.353876-87.914833-87.914833 0-24.296463 9.846461-46.259186 25.767038-62.179763 15.920577-15.888608 37.883301-25.735069 62.147795-25.735069h463.550935z"
                      fill="#8B87C1" p-id="6347"></path>
                  <path d="M622.83343 324.706241h112.946583v343.123599h-112.946583z" fill="#FF4893" p-id="6348"></path>
                  <path
                      d="M830.088652 253.287428h-556.261122c-60.814686 0-110.293154-49.478468-110.293154-110.293154 0-29.459461 11.476882-57.160626 32.320689-78.004433 20.866186-20.827823 48.554563-32.28872 77.972465-32.28872h463.550935a22.378321 22.378321 0 1 1 0 44.756642h-463.550935c-17.480666 0-33.935125 6.815797-46.339109 19.194205a65.120914 65.120914 0 0 0-19.197403 46.342306c0 36.137792 29.39872 65.536512 65.536512 65.536512h556.261122a22.378321 22.378321 0 1 1 0 44.756642z"
                      fill="#4F46A3" p-id="6349"></path>
                  <path
                      d="M185.912697 907.054091a22.378321 22.378321 0 0 1-22.378321-22.378321v-741.681496a22.378321 22.378321 0 1 1 44.756642 0v741.681496a22.378321 22.378321 0 0 1-22.378321 22.378321zM830.088652 991.772021a22.378321 22.378321 0 0 1-22.378321-22.378321v-738.484593a22.378321 22.378321 0 1 1 44.756642 0v738.484593a22.378321 22.378321 0 0 1-22.378321 22.378321zM737.378465 253.287428a22.378321 22.378321 0 0 1-22.378321-22.378321v-175.829665a22.378321 22.378321 0 1 1 44.756642 0v175.829665a22.378321 22.378321 0 0 1-22.378321 22.378321zM273.82753 886.274222a22.378321 22.378321 0 0 1-22.378321-22.378321v-521.095189a22.378321 22.378321 0 1 1 44.756642 0v521.095189a22.378321 22.378321 0 0 1-22.378321 22.378321z"
                      fill="#4F46A3" p-id="6350"></path>
                  <path
                      d="M830.088652 994.968924h-556.261122c-60.814686 0-110.293154-49.478468-110.293154-110.293154a22.378321 22.378321 0 1 1 44.756642 0c0 36.137792 29.39872 65.536512 65.536512 65.536512h556.261122a22.378321 22.378321 0 1 1 0 44.756642zM735.780013 690.204964h-112.946583a22.378321 22.378321 0 0 1-22.378321-22.378321v-343.123599a22.378321 22.378321 0 0 1 22.378321-22.378321h112.946583a22.378321 22.378321 0 0 1 22.378321 22.378321v343.123599c0 12.362424-10.015897 22.378321-22.378321 22.378321z m-90.568262-44.756642h68.189941v-298.366957h-68.189941v298.366957zM735.780013 131.773145H195.567344a22.378321 22.378321 0 1 1 0-44.756642h540.212669a22.378321 22.378321 0 1 1 0 44.756642zM735.780013 192.546271H195.567344a22.378321 22.378321 0 1 1 0-44.756642h540.212669a22.378321 22.378321 0 1 1 0 44.756642z"
                      fill="#4F46A3" p-id="6351"></path>
                </svg>
              </template>
            </Icon>
            <span
                style="position: absolute;top: 2px; font-size: medium;color: #333333;font-weight: bold; background-color: inherit">我的个人博客
          </span>
          </a-button>
        </a>
      </div>

      <!--头像-->
      <div style="position: absolute;top: 3%;right: 4%">
        <a-tooltip>
          <template #title>源码学习</template>
          <a href="https://gitee.com/deng-2022/memory-cal-backend" target="_blank">
            <img style="width: 40px;border-radius: 50%;"
                 src="http://qzapp.qlogo.cn/qzapp/101983660/A50B792021EBFE44E237F78561B4DEDF/100"
                 alt="">
          </a>
        </a-tooltip>
      </div>
    </div>

    <a-tabs v-model:activeKey="activeKey" tab-position="left" style="margin-top: 0.5%">
      <a-tab-pane key="1">
        <template #tab>
        <span>
          <MoneyCollectOutlined/>
      投标含税价相关
        </span>
        </template>
        <div>
          <div style="margin-top: 10px">
            <a-card title="全国招标代理费" style=" box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1)">
              <a-form @submit="onSubmit">
                <a-form-item label="选择省份">
                  <a-select v-model:value="bidAgen.province" placeholder="请选择您所在区域">
                    <a-select-option value="1">山西</a-select-option>
                  </a-select>
                </a-form-item>

                <a-form-item label="选择标准">
                  <a-select v-model:value="bidAgen.standard" placeholder="please select your zone">
                    <a-select-option value="1">
                      国家计委计价格[2002]1980号文件及发改办价格[2003]857号文件、发改办价格[2011]534号文件
                    </a-select-option>
                  </a-select>
                </a-form-item>

                <a-form-item label="服务类型">
                  <a-select v-model:value="bidAgen.process" placeholder="please select your zone">
                    <a-select-option value="货物招标">货物招标</a-select-option>
                    <a-select-option value="服务招标">服务招标</a-select-option>
                    <a-select-option value="工程招标">工程招标</a-select-option>
                  </a-select>
                </a-form-item>

                <a-form-item label="工程造价">
                  <a-input v-model:value="bidAgen.cost" autofocus style="width: 20%">
                  </a-input>
                  <a-button type="primary" size="middle">万元</a-button>
                </a-form-item>

                <div>
                  <a-form-item label="打折折扣">
                    <a-input-number min="0" max="100" v-model:value="bidAgen.discount" step="10" style="width: 5%">
                    </a-input-number>
                    <PercentageOutlined style="font-size: large;color: dodgerblue"/>
                  </a-form-item>

                  <div style="margin-left: 83%">
                    <a-button type="primary" @click="onSubmit" size="large">点击计算</a-button>
                    <a-button style="margin-left: 10px" size="large" @click="toOrigin">恢复默认</a-button>
                  </div>
                </div>

              </a-form>
            </a-card>
          </div>

          <div style="margin-top: 15px">
            <a-card title="全国招标代理费计算结果" style=" box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1)">
              <a-form :model="result">
                <a-form-item label="打折前招标代理费">
                  <a-input v-model:value="result.beforeDis" style="width: 20%">

                  </a-input>
                  <a-button type="primary" size="middle">万元</a-button>
                </a-form-item>

                <a-form-item label="打折后招标代理费">
                  <a-input max="100" v-model:value="result.afterDis" style="width: 20%">

                  </a-input>
                  <a-button type="primary" size="middle">万元</a-button>
                  <a-button style="margin-left: 85%" type="primary" size="large" @click="toCalRule">学习了解计算规则
                  </a-button>
                </a-form-item>

                <a-form-item label="计算过程">
                  <a-textarea v-model:value="result.procedure"
                              style="height: 150px;font-size: medium;font-weight: bold">

                  </a-textarea>
                </a-form-item>

                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                </a-form-item>
              </a-form>
            </a-card>
          </div>
        </div>
      </a-tab-pane>

      <a-tab-pane key="2">
        <template #tab>
        <span>
         <PieChartOutlined/>
         建设工程监理收费
        </span>
        </template>

        <!--待完成-->
        <a-result status="warning" title="该功能正在开发完善中，敬请期待">
          <template #extra>
            <a-button key="console" type="primary" @click="yell">点击此处反馈</a-button>
          </template>
        </a-result>
      </a-tab-pane>

      <a-tab-pane key="3">
        <template #tab>
        <span>
       <ApiOutlined/>
        建设工程造价咨询
        </span>
        </template>

        <!--待完成-->
        <a-result status="warning" title="该功能正在开发完善中，敬请期待">
          <template #extra>
            <a-button key="console" type="primary" @click="yell">点击此处反馈</a-button>
          </template>
        </a-result>
      </a-tab-pane>
    </a-tabs>

    <div>
      <div style="text-align: center;margin-top: 10px">
        <div style="font-style: italic;font-size: small">
          <p>非经授权许可，不得将之用于赢利或非赢利性的任何用途，不得向任何第三方供应修改后的软件</p>
          <p>
            本站推荐全部软件版权归原创者全部。我们不欢迎大规模的全站复制，并且保留全部权利。商业网站或未授权媒体不得复制本站内容。
          </p>
        </div>
        <p>
          <a href="https://2x.antdv.com/components/overview/">
            <a-button type="text" style="font-size: medium;color: dodgerblue">
              Ant Design Vue 组件库
            </a-button>
          </a>
          <HeartTwoTone twoToneColor="#eb2f96"/>
          <a href="https://www.iconfont.cn/?spm=a313x.search_index.i3.d4d0a486a.55f23a81d14YZR">
            <a-button type="text" style="font-size: medium;color: dodgerblue">
              iconfont 矢量图标库
            </a-button>
          </a>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {message} from "ant-design-vue";
import myAxios from "@/plugins/myAxios";
import Icon from '@ant-design/icons-vue';
import {
  MoneyCollectOutlined,
  ApiOutlined,
  PercentageOutlined,
  HeartTwoTone,
  PieChartOutlined
} from '@ant-design/icons-vue';

const activeKey = ref('1')

onMounted(()=>{
  message.info('欢迎使用 Memory Cal 忆算云');
})

interface BidAgenState {
  province: string;
  standard: string;
  process: string;
  cost: number;
  discount: number;
}

const bidAgen = ref<BidAgenState>({
  province: '山西',
  standard: '唯一标准',
  process: '货物招标',
  cost: 0.0,
  discount: 100
});


interface ResultState {
  beforeDis: number;
  afterDis: number;
  procedure: string;
}

const result = ref<ResultState>({
  beforeDis: 0,
  afterDis: 0,
  procedure: ""
});


const doCalculate = () => {
  myAxios.post("/serve/calculate", bidAgen.value).then((res) => {
    message.success(bidAgen.value.process + "，计算成功！")
    console.log(res.data.procedure)

    if (res.data) {
      result.value.procedure = res.data.procedure;
      result.value.beforeDis = res.data.beforeDis;
      result.value.afterDis = res.data.afterDis;
    }

  }).catch(() => {
    console.log("获取用户列表失败")
  });
}

const onSubmit = () => {
  if (bidAgen.value.cost <= 0) {
    message.error("工程造价必须是大于0的数字")
    return
  }

  doCalculate();
}

const yell = () => {
  window.open("https://gitee.com/deng-2022/memory-cal-backend/issues")
}


const toOrigin = () => {
  bidAgen.value.province = "山西"
  bidAgen.value.standard = " 国家计委计价格[2002]1980号文件及发改办价格[2003]857号文件、发改办价格[2011]534号文件"
  bidAgen.value.process = "货物招标"
  bidAgen.value.cost = 0.0
  bidAgen.value.discount = 100
  message.success("重置成功")
}

const toCalRule = () => {
  const htmlFilePath = 'https://deng-2022.gitee.io/bidding-agency-charge/'; // 替换为实际的 HTML 文件路径
  window.open(htmlFilePath);
}

</script>

<style>

.demo-page-header {
  position: relative;
  backdrop-filter: blur(5px);
}
</style>